<template>
	<view class="container pad30">
		<sb-back-icon></sb-back-icon>
		<u-form :model="form" ref="uForm" label-width='200' class="bg-white radius10 padh20">
			<u-form-item label="Receiver">
				<u-input v-model="form.name" placeholder="Receiver" />
			</u-form-item>
			<u-form-item label="PhoneNo">
				<u-input v-model="form.tel" placeholder="PhoneNo" />
			</u-form-item>
			<u-form-item label="Region">
				<u-input v-model="form.region" type="select" @tap="showRegionPicker" placeholder="Region" />
			</u-form-item>
			<u-form-item label="Address">
				<u-input v-model="form.address" placeholder="Address" />
			</u-form-item>
			<u-form-item label="Is Default">
				<u-switch slot="right" v-model="form.first" active-color="#c03" />
			</u-form-item>
			<sb-center>
				<view class="btn-add clickable flex a-c j-c bold" @click="handleSave">
					<u-icon name="save" color="#ffffff" class='marh10' :size="40"></u-icon>
					Save Address
				</view>
			</sb-center>
		</u-form>
		<u-picker confirm-text='Confirm' cancel-text='Cancel' confirm-color='#080808' cancel-color='#ccc' ref="uPicker"
			mode="selector" :default-selector="[currentRegionIndex]" :range="regionOptions" v-model="show"
			@confirm="handleConfirmRegion" />

	</view>
</template>

<script>
	import { getDictModule } from '@/service/common'

	export default {
		data() {
			return {
				show: false,
				regionOptions: [],
				currentRegionIndex: 0,
				form: {
					id: 0,
					region: "",
					name: "",
					tel: "",
					address: "",
					first: false,
				},
			};
		},
		onLoad({ id }) {
			if (id) {
				this.form.id = id;
				this.getAddressInfo();
			} else {
				this.getRegionDict()
			}
		},
		methods: {
			showRegionPicker() {
				this.show = true;
			},
			handleConfirmRegion(i) {
				this.form.region = this.regionOptions[i]
			},
			async getRegionDict() {
				let { success, data } = await getDictModule("RECEIVER_CITY")
				if (!success) return this.$msg("request error")
				this.regionOptions = data.map(r => r.value)
			},
			// 获取原地址信息
			async getAddressInfo() {
				await this.getRegionDict()
				let { success, data } = await this.$get("/cus-address/detail", {
					id: this.form.id,
				});
				if (!success) return this.$msg("request error")
				data.first = !!data.first;
				this.form = data
				this.currentRegionIndex = this.regionOptions.findIndex(r => r === data.region)
				console.log(this.currentRegionIndex);
			},
			async handleSave() {
				if (!this.form.name) return this.$msg("Receiver is required");
				if (!this.form.tel) return this.$msg("PhoneNo is required");
				if (!this.form.region) return this.$msg("Region is required");

				let params = Object.assign({}, this.form)
				params.first = ~~this.form.first
				let url = params.id ? "/cus-address/update" : "/cus-address/add"
				let { success, data } = await this.$postB(url, params);
				if (!success) return this.$msg(data || "Sava Failed");
				this.$msg("Save Success", () => {
					this.$prevPage().refresh()
					this.$back()
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		/deep/ {
			.u-form-item--left__content__label {
				font-weight: bold;
			}
		}
	}

	.btn-add {
		background: $main-color;
		color: #fff;
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
	}
</style>
